<template>
  <div class="notice-board">
    <s-header :name="'审查公示'" :back="'/government'"></s-header>
    <van-tabs
      v-model:active="tabActive"
      :ellipsis="false"
      color="#FED045"
      background="linear-gradient(90deg, #206dec, #359eff)"
      title-active-color="#fff"
      title-inactive-color="#dfe9ff"
      :before-change="beforeChange"
      class="tabs-box"
    >
      <van-tab v-for="(tab, index) in tabList" :key="index" :name="tab.code" :title="tab.desc">
        <div class="content">
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
            <van-list v-model:loading="loading" :finished="finished" @load="onLoad" :finished-text="dataList.length ? '没有更多了' : '暂无记录'" @offset="10">
              <template v-if="dataList.length">
                <div v-for="(item, index) in dataList" :key="index" class="card-box">
                  <div class="time-box" v-if="item.showTime && item.applyTime">
                    <van-image class="time-img" width="12" height="12" :src="timeImg" />
                    <span class="time">申请日期：{{ item.applyTime }}</span>
                  </div>
                  <div class="card-item" @click="goToDetail(item.id)">
                    <div class="card-header">
                      <div class="header-title">
                        <div class="title">申请人：{{ item.applyName }}</div>
                        <span class="notice-status status-success" v-show="item.day">已公示{{ item.day }}天</span>
                      </div>
                    </div>
                    <div class="card-body">
                      <ul class="apply-info">
                        <div v-show="tab.isShow" class="reapply" @click.stop="handleTransact(item.id)">去办理</div>
                        <li>单号：{{ item.applyOrderNo }}</li>
                        <li>建房类型：{{ item.buildTypeName }}</li>
                        <li>拟建位置：{{ item.proposedLocationAddress }}</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </template>
              <van-image v-else :src="listNull" class="empty" width="120" alt="搜索" />
            </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, getCurrentInstance, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import sHeader from '@/components/SimpleHeader'
import { getNoticeList } from '@/service/govern'
import timeImg from '@/assets/Images/time.png'
import listNull from '@/assets/Images/list_null.png'

export default {
  components: {
    sHeader,
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      timeImg: timeImg,
      listNull: listNull,
      dataList: [],
      reapplyArr: [],
      loading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 5,
        applyStatus: '01',
      },
      total: 0,
      refreshing: false,
      finished: false,
      active: '01',
      tabList: [
        { id: '01', name: '待审查' },
        { id: '02', name: '公示中' },
        { id: '04', name: '已审查公示' },
        { id: '03', name: '已退回' },
        { id: '99', name: '已挂起' },
      ],
    })

    // 全局属性
    const { getTabList } = getCurrentInstance().appContext.config.globalProperties

    getTabList(3).then((list) => {
      state.tabList = list
      const { active } = route.query
      if (active) {
        state.active = active
      } else {
        state.active = list[0].code
      }
      state.reapplyArr = [list[0].code, list[1].code]
      onLoad()
    })

    onMounted(async () => {})

    //获取公示列表
    const getDataList = async () => {
      state.listQuery.applyStatus = state.active
      if (state.listQuery.applyStatus) {
        getNoticeList(state.listQuery).then((res) => {
          const page = res.data

          for (let index = 0; index < page.records.length; index++) {
            const item = page.records[index]
            item.showTime = true
            if (page.records[index - 1] && item.applyTime === page.records[index - 1].applyTime) {
              item.showTime = false
            }
          }

          state.dataList = state.dataList.concat(page.records)
          state.total = page.total
          state.loading = false
          if (state.dataList.length >= page.total) state.finished = true
        })
      }
    }

    // 加载列表
    const onLoad = () => {
      if (!state.refreshing && state.dataList.length < state.total) {
        state.listQuery.pageNo = state.listQuery.pageNo + 1
      }
      if (state.refreshing) {
        state.dataList = []
        state.refreshing = false
      }
      getDataList()
    }

    // 刷新列表
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.listQuery.pageNo = 1
      onLoad()
    }

    const goToDetail = (id) => {
      router.push({ path: `/government/build-apply/detail/${id}`, query: { pathName: `/government/review-public?active=${state.active}` } })
    }

    const handleTransact = (id) => {
      if (state.active === state.reapplyArr[0]) {
        router.push({ path: `/government/review-public/examine/${id}`, query: { pathName: `/government/review-public?active=${state.active}` } })
      } else if (state.active === state.reapplyArr[1]) {
        router.push({ path: `/government/review-public/publicity/${id}`, query: { pathName: `/government/review-public?active=${state.active}` } })
      }
    }

    // 切换标签页
    const beforeChange = (index) => {
      state.active = index
      onRefresh()
    }

    const tabActive = computed(() => {
      return state.active
    })

    return {
      tabActive,
      ...toRefs(state),
      onLoad,
      onRefresh,
      getDataList,
      goToDetail,
      beforeChange,
      handleTransact,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.notice-board {
  min-height: 100vh;
  font-size: 14px;
  color: #2e3f6a;
  font-weight: 400;
  background-color: rgb(246, 245, 250);
  .content {
    overflow: hidden;
    overflow-y: scroll;
    padding: 0 15px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    .empty {
      display: block;
      width: 120px;
      margin: 110px auto 30px;
    }
    .card-box {
      margin-top: 10px;
      color: #2e3f6a;
      font-weight: 400;
      .time-box {
        margin-bottom: 10px;
        .time {
          color: #9297ae;
          font-size: 13px;
          font-weight: 400;
          margin-left: 6px;
        }
      }
      .header-title {
        font-size: 16px;
        font-weight: bold;
        .title {
          line-height: 28px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .fj();
        .notice-status {
          background: #e1f1ff;
          border-radius: 3px;
          color: #216eec;
          font-size: 13px;
          font-weight: 400;
          padding: 4px 14px;
        }
        .status-success {
          background-color: #e8f7e0;
          color: #5eb02d;
        }
        .status-info {
          background-color: #ddf6fa;
          color: #009eb6;
        }
        .status-danger {
          background-color: #ffe9e9;
          color: #df3838;
        }
        .finish {
          background-color: #72c604;
        }
      }
      .card-body {
        .apply-info {
          li {
            margin-top: 6px;
          }
        }
        .reapply {
          background: linear-gradient(90deg, #206dec, #359eff);
          border-radius: 5px;
          color: @fc;
          font-size: 13px;
          font-weight: 400;
          padding: 4px 14px 5px;
          float: right;
          &::before {
            clear: both;
          }
        }
      }
      .van-divider {
        margin: 10px 0 0;
      }
    }
  }
}
</style>
